<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :span="24">
          <a-card>
            <div class="mb-20">
              <!-- 查询参数 -->
              <pro-query
                :searchParam="searchParams.params"
                @on-search="search"
                @on-reset="onReset"
              ></pro-query>
            </div>
            <!-- 列表 -->
            <pro-table
              ref="tableRef"
              :fetch="fetch"
              :columns="columns"
              :toolbar="toolbar"
              :param="state.param"
              :pagination="pagination"
            >
            </pro-table>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
    <detail
      v-if="state.detailVisible"
      :visible="state.detailVisible"
      :record="state.currentRow"
      type="income"
      @close="close"
    ></detail>
    <receiptOk
      v-if="state.confirmVisible"
      :visible="state.confirmVisible"
      :record="state.currentRow"
      @close="close"
    ></receiptOk>
    <receipt-account
      :visible="state.visibleAccount"
      :record="state.currentRow"
      @close="close"
    ></receipt-account>

    <a-modal
      v-model:visible="state.visiblePay"
      :maskClosable="false"
      destroyOnClose
      title="新增收款"
      cancelText="取消"
      okText="保存"
      @ok="handleOk"
      @cancel="cancel('close')"
    >
      <a-form
        ref="formRef"
        :model="state.saveData"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item
          label="收款金额"
          name="amount"
          :rules="[
            { required: true, type: 'number', message: '请输入收款金额', trigger: 'change' },
          ]"
        >
          <a-input-number
            style="width: 100%"
            v-model:value="state.saveData.amount"
            :min="0"
            :max="100000000"
            :precision="2"
          />
        </a-form-item>
        <!-- <a-form-item label="支付方式" name="payType">
          <a-select style="width: 100%" v-model:value="state.saveData.payType">
            <a-select-option
              v-for="(item, i) in dictLists.data[dictEnum.PAY_METHOD]"
              :key="i"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item> -->
        <a-form-item name="remark" label="备注">
          <a-textarea v-model:value="state.saveData.remark" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      class="modal-extend"
      destroyOnClose
      :closable="false"
      :maskClosable="false"
      :visible="state.visibleCode"
      v-if="state.visibleCode"
      cancelText="取消"
      okText="关闭"
      @ok="cancel"
      @cancel="cancel"
    >
      <div class="qrcode">
        <img class="wx-img" src="@/assets/image/wx-zf.png" alt="微信支付">
        <div class="code">
          <div class="border_corner border_corner_left_top"></div>
          <div class="border_corner border_corner_right_top"></div>
          <div class="border_corner border_corner_left_bottom"></div>
          <div class="border_corner border_corner_right_bottom"></div>
          <qrcode-vue :value="state.qrCodeUrl" :size="200" level="H" />
          <div class="label">微信支付</div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
export default {
  name: "receipt-order"
}
</script>
<script setup>
import { btnIsPowerByCode, filterEmptyByObject } from "../../tools/common";
import { page, editFinance } from "../../api/module/finance-payment";
import { reactive, onMounted, createVNode, ref, nextTick } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { message, modal } from "ant-design-vue";
import { useRouter } from "vue-router";
import { getDictByCodesReturnObj } from "../../tools/get-dict";
import dictEnum from "../../const/dict";
import moment from "moment";
import { useI18n } from "vue-i18n";
import detail from "./modal/detail.vue";
import receiptOk from "./modal/receiptOk.vue";
import receiptAccount from "./modal/receiptAccount.vue";
import QrcodeVue from "qrcode.vue";

const tableRef = ref();
const formRef = ref();
const { t } = useI18n();

const columns = [
  {
    title: "订单编号",
    dataIndex: "orderNO",
    key: "orderNO",
    width: 180,
  },
  { title: "流水编号", dataIndex: "serialNo", key: "serialNo", width: 180 },
  { title: "交易金额", dataIndex: "tradeAmt", key: "tradeAmt", width: 130 },
  {
    title: "支付方式",
    dataIndex: "payType",
    key: "payType",
    width: 150,
    cellRender: (record, data) => {
      const item = dictLists.data[dictEnum.PAY_METHOD]
        ? dictLists.data[dictEnum.PAY_METHOD].find((v) => v.value == data)
        : {};
      return item ? item.label : "";
    },
  },
  // {
  //   title: t("financeManage.label.finance-5"),
  //   dataIndex: "currency",
  //   key: "currency",
  //   width: 150,
  //   cellRender: (record, data) => {
  //     const item = dictLists.data[dictEnum.CURRENCY]
  //       ? dictLists.data[dictEnum.CURRENCY].find((v) => v.value == data)
  //       : {};
  //     return item ? item.label : "";
  //   },
  // },
  { title: "备注", dataIndex: "remark", key: "remark", width: 150 },
  {
    title: "支付状态",
    dataIndex: "payStatus",
    key: "payStatus",
    width: 150,
    fixed: "right",
    cellRender: (record, data) => {
      const item = dictLists.data[dictEnum.COLLECTION_PAY_STATE]
        ? dictLists.data[dictEnum.COLLECTION_PAY_STATE].find(
            (v) => v.value == data
          )
        : {};
      return item ? item.label : "";
    },
  },
];
/// 数据来源 [模拟]
const fetch = async (param) => {
  // param.fncType = 1;
  let response = await page(param);
  return {
    data: response.data.record,
    total: response.data.total,
  };
};
const pagination = {
  pageNum: 1,
  pageSize: 10,
};
const router = useRouter();

let dictLists = reactive({
  data: {},
});
let searchParams = reactive({
  params: [],
});
/// 行操作
const operate = [
  // {
  //   label: "来源",
  //   event: function ({ id }) {},
  // },
  {
    label: "更多操作",
    children: [
      {
        label: "确认收款",
        show: (record) => {
          return true;
        },
        event: function (record) {
          state.confirmVisible = true;
          state.currentRow = record;
        },
      },
      {
        label: "未收款",
        show: (record) => {
          return true;
        },
        event: function (record) {
          modal.confirm({
            title: "确认后订单将自动取消，确认后将不可撤销，确认未收到款?",
            icon: createVNode(ExclamationCircleOutlined),
            okText: "确认",
            cancelText: "取消",
            onOk() {
              let params = {
                ...record,
                checkStatus: 7,
              };
              editFinance(params).then((res) => {
                if (res.success) {
                  message
                    .success({ content: "操作成功", duration: 1 })
                    .then(() => {});
                } else {
                  message.error({
                    content: "操作失败",
                    duration: 1,
                  });
                }
              });
            },
          });
        },
      },
      {
        label: "查看收据",
        show: (record) => {
          return true;
        },
        event: function (record) {},
      },
      {
        label: "下载收据",
        show: (record) => {
          return true;
        },
        event: function (record) {},
      },
      {
        label: "项目红冲",
        show: (record) => {
          return true;
        },
        event: function (record) {
          state.currentRow = record;
          state.visibleAccount = true;
        },
      },
      {
        label: "详情",
        show: (record) => {
          return true;
        },
        event: function (record) {
          state.detailVisible = true;
          state.currentRow = record;
        },
      },
      {
        label: "作废",
        show: (record) => {
          return true;
        },
        event: function (record) {
          modal.confirm({
            title: "确认后订单将自动取消，确认后将不可撤销，确认作废?",
            icon: createVNode(ExclamationCircleOutlined),
            okText: "确认",
            cancelText: "取消",
            onOk() {
              let params = {
                ...record,
                checkStatus: 7,
              };
              editFinance(params).then((res) => {
                if (res.success) {
                  message
                    .success({ content: "操作成功", duration: 1 })
                    .then(() => {});
                } else {
                  message.error({
                    content: "操作失败",
                    duration: 1,
                  });
                }
              });
            },
          });
        },
      },
    ],
  },
];

const toolbar = [
  {
    code: "receipt-order:add",
    label: "新增收款",
    type: "primary",
    event: (selectedRowKeys) => {
      state.saveData = {
        amount: null,
        remark: "",
        payType: '1',
      }
      state.visiblePay = true;
    },
  },
];
onMounted(async () => {
  dictLists.data = await getDictByCodesReturnObj([
    dictEnum.CURRENCY, // 币种
    dictEnum.TRADING_PARTNER, // 交易对象
    dictEnum.PAY_METHOD, // 支付方式
    dictEnum.FINANCE_TYPE, // 财务类型
    dictEnum.GENERATION_MODE, // 产生方式
    dictEnum.BILL_SOURCE, // 账单类型
    dictEnum.COLLECTION_PAY_STATE, // 收付款状态
  ]);

  searchParams.params = [
    {
      key: "orderNo",
      type: "input",
      label: "订单编号",
      placeholder: "请输入",
    },
    {
      key: "serialNo",
      type: "input",
      label: "流水编号",
      placeholder: "请输入",
    },
    {
      key: "payStatus",
      type: "select",
      label: "支付状态",
      placeholder: "全部",
      options: dictLists.data[dictEnum.COLLECTION_PAY_STATE],
    },
    {
      key: "payType",
      type: "select",
      label: "支付方式",
      placeholder: "全部",
      options: dictLists.data[dictEnum.PAY_METHOD],
      hidden: true,
    },
  ];
});

const search = (value) => {
  state.param = {
    ...state.param,
    ...filterEmptyByObject(value),
    bgeinTime: value.createTime
      ? moment(value.createTime[0]).valueOf()
      : undefined,
    endTime: value.createTime
      ? moment(value.createTime[1]).valueOf()
      : undefined,
  };
};
const onReset = (value) => {
  state.param = {};
};

const state = reactive({
  selectedRowKeys: [],
  param: {},
  visibleSave: false,
  visibleEdit: false,
  visibleInfo: false,
  visibleAccount: false,
  recordEdit: {},
  recordInfo: {},

  detailVisible: false,
  confirmVisible: false, // 确认收款
  currentRow: {},
  visiblePay: false,
  visibleCode: false,
  saveData: {},
  qrCodeUrl: ''
});

const onSelectChange = (selectedRowKeys) => {
  state.selectedRowKeys = selectedRowKeys;
};

const close = (value) => {
  state[value] = false;
};
const handleOk = () => {
  formRef.value.validate().then(() => {
    modal.confirm({
      title: "收款金额是否确认无误?",
      icon: createVNode(ExclamationCircleOutlined),
      okText: "确认",
      cancelText: "取消",
      onOk() {
        state.saveData.payType = "1";
        editFinance({ ...state.saveData }).then((res) => {
          const { success, msg, data } = res;
          if (success && data.codeUrl) {
            state.visiblePay = false;
            tableRef.value.reload()
            nextTick(() => {
              state.visibleCode = true;
              state.qrCodeUrl = data.codeUrl;
            })
          } else {
            message.error({
              content: msg,
              duration: 1,
            });
          }
        });
      },
    });
  })
};
const cancel = (value) => {
  if (value == "close") return (state.visiblePay = false);
  state.visibleCode = false;
};
</script>
<style lang="scss" scoped>

.modal-extend {
  /deep/ .ant-modal-header {
    display: none;
  }
}
.qrcode {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .wx-img {
    width: 100%;
  }

  .code {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    position: relative;
    /*四个角框*/
    .border_corner{
      z-index: 2500;
      position: absolute;
      width: 19px;
      height: 19px;
      background: rgba(0,0,0,0);
      border: 2px solid #000;
    }
    .border_corner_left_top{
      top: -20px;
      left: 117px;
      border-right: none;
      border-bottom: none;
      border-top-left-radius: 2px;
    }
    .border_corner_right_top{
      top: -20px;
      right: 117px;
      border-left: none;
      border-bottom: none;
      border-top-right-radius: 2px;
    }
    .border_corner_left_bottom{
      bottom: -20px;
      left: 117px;
      border-right: none;
      border-top: none;
      border-bottom-left-radius: 2px;
    }
    .border_corner_right_bottom{
      bottom: -20px;
      right: 117px;
      border-left: none;
      border-top: none;
      border-bottom-right-radius: 2px;
    }
    .label {
      position: absolute;
      width: 100px;
      padding: 2px 0;
      text-align: center;
      font-size: 13px;
      background-color: #0436F9;
      color: #fff;
      font-weight: bold;
      border-radius: 3px;
      left: 0;
      top: -105px;
    }
  }
}
</style>
